/*
 * @Author: shawnxiao
 * @Date: 2021-10-25 18:18:17
 * @LastEditTime: 2021-11-10 15:07:20
 * @FilePath: /gatt-react/src/index/views/Home/components/GattDrag/components/GattDate/components/FirstRow.tsx
 */
import React, { Fragment } from 'react'
import './FirstRow.less'
import {currentDaySizeType} from '..'
interface PropsFirstRow{
  allDays:any[]
  currentDaySize:currentDaySizeType
}

function FirstRow(props:PropsFirstRow) {
  const {currentDaySize, allDays} = props
  return (
    <div className="gatt-main-row">
      {
        currentDaySize.mode === 'halfYear' ? (
          allDays.length && allDays.map((item:any) => {
            return (<div
              className="gatt-main-row-colum" key={item.year}
              style={{ width: item.days * currentDaySize.value + 'px' }}>
                <div className="gatt-main-row-colum-date">
                  { item.year }年
                </div>
            </div>)
          })
        ) : (
          allDays.length && allDays.map((item:any) => {
            return (<Fragment key={`${item.year}-m-d`}>
              {
                Object.entries(item.month[0]).length && Object.entries(item.month[0]).map((month:any) => {
                  return (<div
                    className="gatt-main-row-colum" key={`month${month[0]}`}
                    style={{ width: month[1].dayArr.length * currentDaySize.value + 'px' }}>
                      <div className="gatt-main-row-colum-date">
                        { item.year }年{ month[0] }月
                      </div>
                  </div>)
                })
              }
            </Fragment>)
          })
        )
      }
    </div>
  )
}

export default FirstRow
